<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1 @click="say">你好</h1>
      <list-com>
        <template #toubu>
          <div>头部</div>
        </template>
        <template #jiaobu>
          <div>脚步</div>
        </template>
        <template #default="pUser">
          <div>
            默认内容{{pUser.user.name}}
          </div>
        </template>
      </list-com>
    </div>
    <template id="list">
      <div>
        <slot name="toubu"></slot>
        <slot name="jiaobu"></slot>
        <slot :user="user"></slot>
      </div>
    </template>
    <script src="vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data() {
          return {}
        },
        methods: {
          say() {
            console.log(111)
          }
        },
        mounted() {
          // 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器
          console.log(this.$listeners)
        },
        components: {
          listCom: {
            template: '#list',
            data() {
              return {
                user: {
                  name: '张三'
                }
              }
            },
            methods: {},
            mounted() {
              // this.$slots 获取所有插槽
              console.log(this.$slots.toubu)
              // vue实例是否运行于服务器
              console.log(this.$isServer)
              // vm.$attrs 获取属性
              // 监听一次事件的触发
              // this.$bus.$emit("事件",传值)
              // this.$bus.$on("事件",function(a){ a//传来的值})
              // vm.$once( event, callback )
              // 移出自定义监听器
              // vm.$off([event, callback])
            }
          },
          navCom: {
            template: '#nav'
          }
        }
      })
    </script>
  </body>
</html>
